<template>
  <div>
    账号: <input type="text" v-model="username" /> <br /><br />
    密码: <input type="password" v-model="password" /> <br /><br />
    性别: &nbsp;男<input type="radio" name="sex" v-model="sex" value="male" />
    女<input type="radio" name="sex" v-model="sex" value="female" />
    <br /><br />
    爱好: &nbsp;抽烟
    <input type="checkbox" v-model="hobby" value="smoke" /> 喝酒<input
      type="checkbox"
      v-model="hobby"
      value="drink"
    />
    烫头<input type="checkbox" v-model="hobby" value="perm" /> <br /><br />
    所属校区:
    <select v-model="campus">
      <option value="">请选择所在校区</option>
      <option value="beijing">北京</option>
      <option value="shagnhai">上海</option>
      <option value="wuhan">武汉</option>
      <option value="shenzhen">深圳</option>
    </select>
    <br /><br />
    其他信息: <textarea v-model="otherMsg"></textarea> <br /><br />
    <input type="checkbox" v-model="agreement" /> 阅读并接受<a href="javascript:;">《用户协议》</a>
    <br /><br />
    <button @click="showMsg">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      sex: "",
      hobby: [],
      campus: "",
      otherMsg: "",
      agreement: ''
    };
  },
  methods: {
      showMsg(){
          if(!this.agreement){
              alert('请勾选协议!!!');
          } else {
            let str = `
            用户名为: ${this.username}, 密码为: ${this.password} \n
            性别为: ${this.sex}\n
            爱好有: ${this.hobby}\n
            所在校区是: ${this.campus}\n
            其他信息为: ${this.otherMsg}\n
            `;
            alert(str)
          }
      }
  }
};
</script>

<style>
</style>